<template>
  <div class="outer-shell">
    <div class="container">
      <slot></slot>
    </div>
  </div>
</template> 


<script>
export default {
  name: "Container",
};
</script>

<style scoped>
/* 外壳容器用于居中对齐内部内容 */
.outer-shell {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center; /* ˮƽ���� */
  align-items: center; /* ��ֱ���� */
  background-color: #f0f0f0;
  flex-direction: column; /* ʹ�ײ��˵�������֮�� */
}
.container {
  position: relative;
  height: 100vh;
  z-index: 1; /* ȷ��������������� */
  width: 1200px; /* 设置最大宽度，模拟手机宽度 */
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(169, 110, 110, 0.2); /* 阴影效果 */
  border-radius: 2.5%; /* 圆角效果，使页面更柔�? */
  box-sizing: border-box;
  overflow: hidden
}
</style>